import { Badge } from '/components/badge'

# Page Configuration

Used to configure the display and behavior of the Umo Editor page area.

## Default Configuration

```js
{
  page: {
    layouts: ['page', 'web'], // v8.0.0
    defaultMargin: {
      left: 3.18,
      right: 3.18,
      top: 2.54,
      bottom: 2.54,
    },
    defaultOrientation: 'portrait',
    defaultBackground: '#fff',
    showBreakMarks: true,
    showBookmark: false,
    showLineNumber: false,
    showToc: false,
    watermark: {
      type: 'compact',
      alpha: 0.2,
      fontColor: '#000',
      fontSize: 16,
      fontFamily: 'SimSun',
      fontWeight: 'normal',
      text: '',
    },
  },
}
```

## Configuration Description

### page.layouts

**Description**: List of available page layouts that can be set to page mode (page) and web mode (web). The first item in the array is used as the initial layout by default, and users can freely choose between them. If you want to use only page mode, set it to `['page']`; for web mode only, set it to `['web']`. You can dynamically modify the default layout using the [`setLayout` method](../methods#setlayout) or [`setPage` method](../methods#setpage). <Badge theme="success">Added in v8.0.0</Badge>

**Type**: `Array`

**Default Value**: `['page', 'web']`

### page.defaultMargin

**Description**: Default page margins, modifiable by the user, measured in centimeters (cm). You can dynamically modify the page margins using the [`setPage`](../methods#setpage).

**Type**: `Object`

**Default Value**: `{ left: 3.18, right: 3.18, top: 2.54, bottom: 2.54 }`

### page.defaultOrientation

**Description**: Default page orientation, modifiable by the user. You can dynamically modify the page orientation using the [`setPage`](../methods#setpage).

**Type**: `String`

**Default Value**: `portrait`, prior to version 2.0.0 it was `horizontal`.

**Options**: `portrait` and `landscape`, prior to version 2.0.0 it was `horizontal` and `vertical`.

### page.defaultBackground

**Description**: Default page background color, modifiable by the user. You can dynamically modify the page background color using the [`setPage`](../methods#setpage).

**Type**: `String`

**Default Value**: `#fff`

**Options**: Any valid [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) value.

### page.showBreakMarks

**Description**: Whether to display page break marks, modifiable by the user.

**Type**: `Boolean`

**Default Value**: `true`

**Options**: `true`, `false`.

### page.showBookmark 

**Description**: Whether to display bookmarks, modifiable by the user. <Badge theme="success">Added in v6.0.0</Badge>

**Type**: `Boolean`

**Default Value**: `false`

**Options**: `true`, `false`.

### page.showLineNumber 

**Description**: Whether to display line numbers, modifiable by the user. <Badge theme="success">Added in v6.1.1</Badge>

**Type**: `Boolean`

**Default Value**: `false`

**Options**: `true`, `false`.

### page.showToc 

**Description**: Whether to display page outline, modifiable by the user. <Badge theme="success">Added in v6.1.1</Badge>

**Type**: `Boolean`

**Default Value**: `false`

**Options**: `true`, `false`.

### page.watermark

**Description**: Default watermark settings, modifiable by the user. You can dynamically set or modify the page watermark using the [`setWatermark`](../methods#setwatermark).

**Type**: `Object`

**Options**:

- `type`: `String`, watermark type, options are: `compact`, `spacious`.
- `alpha`: `Number`, watermark transparency, options are: 0-1.
- `fontColor`: `String`, font color, options are: any valid [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) value.
- `fontSize`: `Number`, font size, measured in px.
- `fontFamily`: `String`, font, any valid [CSS font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) value.
- `fontWeight`: `String`, font weight, options are: `normal`, `bold`, `bolder`.
- `text`: `String`, watermark content, recommended to be within 30 characters.
